<template>
  <div>
    <div class="code-but-operation mb-15">
      <span class="s">文件名称</span>
      <el-input v-model="propsData.fileName" placeholder="文件名称" clearable style="width: 200px"></el-input>
      <span class="s">表名</span>
      <el-input v-model="propsData.tableName" placeholder="表名" clearable style="width: 200px"></el-input>
      <span class="s">搜索id</span>
      <el-input v-model="propsData.searchId" placeholder="搜索id" clearable style="width: 200px"></el-input>
      <el-button type="primary" @click="generateApi" class="ml-12">生成api</el-button>
    </div>
    <div class="code-but-operation mb-15">
      <span class="s">table数据解析</span>
      <el-input v-model="propsData.tableDataParsing" placeholder="请输入解析数据" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" clearable class="mr-12 "></el-input>
      <el-button type="primary" @click="startParsingClick">开始解析</el-button>
    </div>
    <el-button size="medium" @click="propsData.apiProp.isDrawer=true">api配置</el-button>
    <el-button size="medium" @click="propsData.optionProp.isDrawer=true">选项配置</el-button>
    <el-button size="medium" @click="propsData.formProp.isDrawer=true">表单配置配置</el-button>
    <el-button type="primary" size="medium" @click="propsData.titleProp.isDrawer=true">title 设置</el-button>
    <el-button type="success" size="medium" @click="propsData.tabsProp.isDrawer=true">tab 设置</el-button>
    <el-button type="info" size="medium" @click="propsData.tableProp.isDrawer=true">table 设置</el-button>
    <el-button type="warning" size="medium">查看JSON数据</el-button>
    <el-button type="danger" size="medium">初始化</el-button>
    <el-button type="danger" size="medium" @click="testClick">测试</el-button>

    <!--api 抽屉-->
    <el-drawer
        title="api设置"
        :visible.sync="propsData.apiProp.isDrawer"
        direction="rtl"
        :append-to-body="true"
        :modal-append-to-body="false"
        size="90%"
    >
      <code-api :propsData="propsData"/>
    </el-drawer>

    <!--选项 抽屉-->
    <el-drawer
        title="选项设置"
        :visible.sync="propsData.optionProp.isDrawer"
        direction="rtl"
        :append-to-body="true"
        :modal-append-to-body="false"
        size="90%"
    >
      <code-option :propsData="propsData"/>
    </el-drawer>

    <!--表单 抽屉-->
    <el-drawer
        title="表单设置"
        :visible.sync="propsData.formProp.isDrawer"
        direction="rtl"
        :append-to-body="true"
        :modal-append-to-body="false"
        size="90%"
    >
      <code-from :propsData="propsData"/>
    </el-drawer>


    <!--title 抽屉-->
    <el-drawer
        title="title设置"
        :visible.sync="propsData.titleProp.isDrawer"
        direction="rtl"
        :append-to-body="true"
        :modal-append-to-body="false"
        size="90%"
    >
      <code-title :propsData="propsData"/>
    </el-drawer>

    <!--tabs 抽屉-->
    <el-drawer
        title="tabs设置"
        :visible.sync="propsData.tabsProp.isDrawer"
        direction="rtl"
        :append-to-body="true"
        :modal-append-to-body="false"
        size="90%"
    >
      <code-tabs :propsData="propsData"/>
    </el-drawer>

    <!--table 抽屉-->
    <el-drawer
        title="table设置"
        :visible.sync="propsData.tableProp.isDrawer"
        direction="rtl"
        :append-to-body="true"
        :modal-append-to-body="false"
        size="90%"
    >
      <code-table :propsData="propsData"/>
    </el-drawer>


  </div>
</template>

<script>
import CodeTitle from "@/views/newCodeProducer/CodeTitle";
import CodeTabs from "@/views/newCodeProducer/CodeTabs";
import CodeTable from "@/views/newCodeProducer/CodeTable";
import CodeOption from "@/views/newCodeProducer/CodeOption";
import CodeApi from "@/views/newCodeProducer/CodeApi";
import CodeFrom from "@/views/newCodeProducer/CodeFrom";

export default {
  components: {CodeApi, CodeOption, CodeTable, CodeTabs, CodeTitle, CodeFrom},
  props: [],
  data() {
    return {
      propsData: {
        fileName: 'navigation',//文件名称
        tableName: '', //表名
        searchId: '',//搜索id
        tableDataParsing: '',//表格数据解析


        //api 设置
        apiProp: {
          isDrawer: false,
          apiArray: [
            // {
            //   notes: '',//api注释
            //   name: '',//api 方法名
            //   path: '',//请求地址
            //   mode: 'get',//请求方式
            //   paramsMode: 'params',//参数方式
            // }
          ]
        },

        //选项 设置
        optionProp: {
          isDrawer: false,
          optionArray: [
            // {
            //   notes:'',//字段注释
            //   field:'',//字段名称
            //   isApi:true,//是否是api true是
            //   //不是api的话内容是说明
            //   contentArray:[
            //     {
            //       label:'',
            //       value:'',
            //     }
            //   ],
            //   dataParsing:'',//解析的数据
            //   contentArrayActive:['1'],//折叠固定打开1
            //   //是api后面才有用
            //   choiceApi:'',//选择api
            //   params:'',//接口参数
            //   label:'',//是api的label字段
            //   value:'',//是api的value字段
            // }
          ],
        },

        //表单配置
        formProp: {
          isDrawer: false,
          formData: [
            // {
            //   name: '',//表单名称
            //   field: '',//字段名称
            //   drawerOrDialog: '抽屉回显/提交',//抽屉 选择，是抽屉还是提示框
            //   promptContent: '',//提示内容
            //   choiceApi: '',//选择api
            //   params: '',//固定参数
            //   //表格内容
            //   contentArray: [
            //     {
            //       type: '头部',//头部  显示 显示表格 输入内容 输入表格
            //       titleName: '',//表头名称
            //       fieldName: '',//字段名称
            //       contentArrayActive: '1',//折叠固定打开1
            //       echoChoiceApi: '',//回显选择api
            //       submitChoiceApi: '',//提交选择api
            //       dataParsing: '',//数据解析
            //       //字段数组
            //       fieldArray: [
            //         {
            //           name: '',//字段名称
            //           field: '',//字段
            //           type: '输入框',//数据类型
            //           startField: '',//开始字段
            //           endField: '',//结束字段
            //           optionField: '',//选项字段
            //           singleFile: true,//是否多个文件  true 多个
            //           required: false,//是否必填 true 必填
            //           jointTableIdRequired: false,//是否联表id true 是
            //           displayOrNot: true,//是否显示 true 是
            //         }
            //       ],
            //       //表格操作按钮数组
            //       tableOperationButtonArray: [
            //         {
            //           type: '输入表格',
            //           name: '',//按钮名称
            //           methodName: '',//按钮方法名称
            //           icon: 'el-icon-check',//按钮图标
            //           color: 'primary',//按钮颜色
            //           choiceFrom: '',//选择操作表单
            //         }
            //       ],
            //     }
            //   ],
            // }
          ]
        },

        //title 设置
        titleProp: {
          isDrawer: false,
          name: '',//标题名称 测试数据
          //按钮集合
          butArray: [
            // {
            //   name: '',//按钮名称
            //   methodName: '',//按钮方法名称
            //   icon: 'el-icon-check',//按钮图标
            //   color: 'primary',//按钮颜色
            //   choiceFrom:'',//选择操作表单
            //   formType:'',//表单属性
            // }
          ]
        },

        //tabs 设置
        tabsProp: {
          isDrawer: false,
          dataParsing: '',//数据解析 数据格式 status;//审批状态:1待审批/2不通过/3通过
          statusField: 'status',//切换的字段名
          dataParsing2: '',//搜索数据解析
          //tabs数组
          tabsArray: [
            {label: '全部', value: ''},
          ],
          //搜索字段
          searchArray: [
            // {
            //   name: '',//字段名称 用于注释
            //   field: '',//字段
            //   type: '',//数据类型
            //   startField: '',//开始字段
            //   endField: '',//结束字段
            //   optionField: '',//选项字段
            // }
          ],

        },

        //表格设置
        tableProp: {
          isDrawer: false,
          isCheckbox: false,//是否多选
          isBatchBut: false,//是否批量删除
          dataParsing: '',//表格内容解析
          //表头按钮数据
          headButArray: [
            // {
            //   name: '',//按钮名称
            //   methodName: '',//按钮方法名称
            //   icon: 'el-icon-check',//按钮图标
            //   color: 'primary',//按钮颜色
            //   choiceFrom:'',//选择操作表单
            //   formType:'',//表单属性
            // }
          ],
          //表格数据
          tableArray: [
            {
              name: '',//字段名称 用于注释
              field: '',//字段
              type: '输入框',//数据类型
              optionField: '',//选项字段
            }
          ],
          //操作按钮数据
          operationButArray: [
            // {
            //   name: '',//按钮名称
            //   methodName: '',//按钮方法名称
            //   icon: 'el-icon-check',//按钮图标
            //   color: 'primary',//按钮颜色
            //   choiceFrom:'',//选择操作表单
            //   formType:'',//表单属性
            // }
          ],
        }

      }
    };
  },
  mounted() {
  },
  methods: {
    //生成api
    generateApi() {
      if (!this.propsData.tableName || !this.propsData.fileName || !this.propsData.searchId) {
        return false
      }
      //table分页列表
      let JsonData1 = {
        notes: 'table 分页列表',//api注释
        name: `${this.propsData.fileName}List`,//api 方法名
        path: `/${this.propsData.tableName}/list.do`,//请求地址
        mode: 'post',//请求方式
        paramsMode: 'params',//参数方式
        params: '',//接口参数
      }
      this.propsData.apiProp.apiArray.push(JsonData1);
      //table 新增/修改
      let JsonData2 = {
        notes: 'table 新增/修改',//api注释
        name: `${this.propsData.fileName}AddEdit`,//api 方法名
        path: `/${this.propsData.tableName}/save.do`,//请求地址
        mode: 'post',//请求方式
        paramsMode: 'data',//参数方式
        params: '',//接口参数
      }
      this.propsData.apiProp.apiArray.push(JsonData2);
      //table 删除
      let JsonData3 = {
        notes: 'table 删除',//api注释
        name: `${this.propsData.fileName}Del`,//api 方法名
        path: `/${this.propsData.tableName}/delete.do`,//请求地址
        mode: 'post',//请求方式
        paramsMode: 'params',//参数方式
        params: '',//接口参数
      }
      this.propsData.apiProp.apiArray.push(JsonData3);
      //table 单条数据查询
      let JsonData4 = {
        notes: 'table 单条数据查询',//api注释
        name: `${this.propsData.fileName}Query`,//api 方法名
        path: `/${this.propsData.tableName}/get${this.Utils.englishInitialCapital(this.propsData.tableName)}.do`,//请求地址
        mode: 'post',//请求方式
        paramsMode: 'params',//参数方式
        params: '',//接口参数
      }
      this.propsData.apiProp.apiArray.push(JsonData4);
      //table 不分页列表
      let JsonData5 = {
        notes: 'table 不分页列表',//api注释
        name: `${this.propsData.fileName}All`,//api 方法名
        path: `/${this.propsData.tableName}/all.do`,//请求地址
        mode: 'post',//请求方式
        paramsMode: 'params',//参数方式
        params: '',//接口参数
      }
      this.propsData.apiProp.apiArray.push(JsonData5);
      //table 批量删除
      let JsonData6 = {
        notes: 'table 批量删除',//api注释
        name: `${this.propsData.fileName}BatchDel`,//api 方法名
        path: `/${this.propsData.tableName}/patchDelete.do`,//请求地址
        mode: 'post',//请求方式
        paramsMode: 'params',//参数方式
        params: '',//接口参数
      }
      this.propsData.apiProp.apiArray.push(JsonData6);
      this.$message.success('生成api成功')
    },
    //table数据解析
    startParsingClick() {
      if (!this.propsData.tableDataParsing) {
        return false
      }
      let dataParsing = this.propsData.tableDataParsing.split('\n')
      for (let i = 0; i < dataParsing.length; i++) {
        let data = dataParsing[i].trim().split(';//');
        let tabsSearchJsonData = {
          name: data[1],//字段名称
          field: data[0],//字段
          type: '输入框',//数据类型
          startField: '',//开始字段
          endField: '',//结束字段
        }
        this.propsData.tabsProp.searchArray.push(tabsSearchJsonData);
        let jsonData = {
          name: data[1],
          field: data[0],
          type: '输入框'
        }
        this.propsData.tableProp.tableArray.push(jsonData);
      }
      this.$message.success('解析成功')
    },
    //测试
    testClick() {
      console.log(this.propsData)
    },
  },
};
</script>

<style lang="scss">
</style>
